<template>
    <div class="expandCustomerIndexSetImp">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>标准管控</el-breadcrumb-item>
            <el-breadcrumb-item>标准管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/expandCustomerIndexSet' }">拓客指标设置</el-breadcrumb-item>
            <el-breadcrumb-item>导入</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="uploadExcel">
            <span>文件：</span>
            <div class="img-wrapper" @click="uploadHandle" v-show="!fileName">
                <i class="el-icon-plus icon"></i>
                <div class="shade"></div>
                <input type="file" ref="inputfile" @change="fileChangeHandle" style="display: none;">
            </div>
            <span>{{fileName}}</span>
            <div style="padding:0 20px;">
                <el-button type="primary" v-show="uploadBtnShow"  @click="uploadFile"  :loading="loadingShow">{{loadingShow?'上传中':'上传'}}<i class="el-icon-upload el-icon--right"></i></el-button>
                <el-button type="primary"  @click='reset'>重置</el-button>
            </div>
        </div>

        <div>
            <a :href="urlString" target="_blank">片区拓客指标导入模板.xlsx</a>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="500px">
            <div v-for="item in dialogContent">{{item}}</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
    name:"expandCustomerIndexSetImp",
    created() {},
    mounted() {},
    components: {},
    data() {
        return {
            loadingShow: false,
            uploadBtnShow:false,
            fileName:'',
            urlString: api.domain + '/spread/api/permission/downloadRegionTemplateExcel',
            dialogVisible:false,
            dialogContent: []
        }
    },
    methods: {
        uploadHandle () {
            const node = this.$refs.inputfile
            node.click()
        },
        fileChangeHandle () {
            const file = this.$refs.inputfile.files[0]
            // 判断文件类型
            const upType = ['xls','xlsx'];
            const fileName = file.name;
            const postfix = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)

            if (!upType.includes(postfix)) {
                this.$alert('只支持xls xlsx格式的文件', '提示', {
                    type: 'error',
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
                return false
            }
            this.uploadBtnShow = true;
            this.fileName = fileName;
        },
        reset(){
            this.fileName = '';
            this.$refs.inputfile.value = '';
            this.loadingShow = false;
            this.uploadBtnShow = false;

        },
        uploadFile(){
            const file = this.$refs.inputfile.files[0];
            if(!file) {
                this.uploadHandle();
                return;
            }
            let params = new FormData();
            params.append('file', file)
            this.loadingShow = true;

            this.$axios.post('/spread/standard/importRegion', params).then(res => {
                this.loadingShow = false;
                this.uploadBtnShow = false;
                this.dialogVisible = true
                this.dialogContent = res
            }).catch(err=>{
                this.$message.error(err||'导入失败');
                this.reset();
            })
        },
    },
    computed: {}
}
</script>
<style lang="stylus" scoped>
    .expandCustomerIndexSetImp {
        .uploadExcel{
            display :flex;
            align-items: center;
            padding:20px 0;
            .img-wrapper{
                position: relative;
                width: 240px;
                height: 40px;
                background-color: #fbfdff;
                border: 1px dashed #c0ccda;
                border-radius: 6px;
                box-sizing: border-box;
                cursor: pointer;
                overflow: hidden;
                &:hover{
                    border-color: #409eff;
                    color: #409eff;
                    .shade{
                        display: block;
                    }
                    .icon{
                        color: #fff;
                        z-index: 9;
                    }
                }
                .shade{
                    position: absolute;
                    display: none;
                    background: rgba(0,0,0,0.5);
                    left: 0;
                    top: 0;
                    right:0;
                    bottom: 0;
                }
                .icon{
                    font-size: 26px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

    }
</style>
